var input = document.querySelector('.form input'); //获取事件输入框
var addBtn = document.querySelector('#add'); //获取添加按钮
var list = document.querySelector('.list'); //获取事件列表ul

//点击添加按钮
addBtn.addEventListener('click', function () { //使用监听器addEventListener
  //使用DOM添加insertAdjacentHTML，第一个参数:添加的位置；第二个参数:添加的内容
  //每次添加的li均添加到ul内的第一个li之前（afterbegin）
  list.insertAdjacentHTML('afterbegin', `
    <li class="item">
          <!-- 事件区域 -->
          <span class="info">${input.value}</span>
          <!-- 按钮区域 -->
          <div class="btn">
            <button class="up"></button>
            <button class="down"></button>
            <button class="edit"></button>
            <button class="fin"></button>
            <button class="del"></button>
          </div>
        </li>
    `);

  // 由于点击添加按钮后新的list会被添加到第一个子节点前
  // 故对list的第一个子元素节点进行操作，否则新增事件无法被删除、修改和完成


  // 上移备忘录
  list.firstElementChild.querySelector('.up').addEventListener('click', function () {
    var nowLi = this.parentNode.parentNode; //获取该条事件行
    var prevLi = nowLi.previousSibling; //获取该条事件行的下一条事件行
    console.log('当前li是', prevLi)
    if (!prevLi) {
      alert('已经是第一条备忘录了！');
    } else {
      list.insertBefore(nowLi, prevLi);
    }
  })

  // 下移备忘录
  list.firstElementChild.querySelector('.down').addEventListener('click', function () {
    var nowLi = this.parentNode.parentNode;
    var nextLi = nowLi.nextSibling;
    if (!nextLi) {
      alert('已经是最后一条备忘录了！');
    } else {
      list.insertBefore(nextLi, nowLi);
    }
  })
  
  // 完成备忘录
  list.firstElementChild.querySelector('.fin').addEventListener('click', function () {
    var item = this.parentNode.parentNode
    item.classList.add('finished')
  })
  // 修改备忘录
  list.firstElementChild.querySelector('.edit').addEventListener('click', function () {
    var item = this.parentNode.parentNode
    item.querySelector('.info').innerText = prompt('请修改你的备忘录：')
  })
  // 删除备忘录
  list.firstElementChild.querySelector('.del').addEventListener('click', function () {
    var item = this.parentNode.parentNode
    var result = confirm("您是否要删除该备忘录？");
    if (result) {
      item.remove(); //点击删除按钮后删除该条li
    }
  })
})

var upBtns = document.querySelectorAll('.up'); //获取上移按钮
var downBtns = document.querySelectorAll('.down'); //获取下移按钮
var delBtns = document.querySelectorAll('.del'); //获取删除按钮
var finBtns = document.querySelectorAll('.fin'); //获取完成按钮
var editBtns = document.querySelectorAll('.edit'); //获取编辑按钮


//遍历，有几个删除按钮则相当于有几个事件（li）
for (var idx = 0; idx < delBtns.length; idx++) {
  //点击上移按钮
  upBtns[idx].addEventListener('click', function () {
    var nowLi = this.parentNode.parentNode; //获取该条事件行
    var prevLi = nowLi.previousSibling;
    console.log('当前LI', prevLi)
    if (!prevLi) {
      alert('到头了');
    } else {
      list.insertBefore(nowLi, prevLi);
    }
  })

  //点击下移按钮
  downBtns[idx].addEventListener('click', function () {
    // var item = this.parentNode.parentNode; //获取该条事件行
    var nowLi = this.parentNode.parentNode;
    var nextLi = nowLi.nextSibling;
    if (!nextLi) {
      alert('到尾了');
    } else {
      list.insertBefore(nextLi, nowLi);
    }
  })

  //点击删除按钮
  delBtns[idx].addEventListener('click', function () {
    var item = this.parentNode.parentNode; //删除按钮父级的父级，即类名为item的li(该按钮所在的行)
    var result = confirm("您是否要删除该备忘录？");
    if (result) {
      item.remove(); //点击删除按钮后删除该条li
    }
  })

  //点击完成按钮
  finBtns[idx].addEventListener('click', function () {
    var item = this.parentNode.parentNode; //获取该条事件行
    //classList属性可以返回一个元素类属性集合
    item.classList.add('finished'); //点击完成按钮后为该行添加新类名finished，以实现新样式
  })

  //点击编辑按钮
  editBtns[idx].addEventListener('click', function () {
    var item = this.parentNode.parentNode; //获取该条事件行
    item.querySelector('.info').innerText = prompt('请修改你的备忘录：'); //点击编辑后将内容插入类名为info的span并弹出系统提示框
  })
}